import { OSprite, OText, ox } from "oixi2";
import { Sprite, Text, Texture } from 'pixi.js';
import { COLOR_DEEP_ORANGE, WIDTH } from '../game/constant';
import { getCardById } from '../levels/cardInfo';
import { builtinModules } from "module";
import { layout } from "../utils/layout";

export function DetailItem(attributes: string) {
  return ox(new XDetailItem, attributes, () => [
    OText('#strLabel x=10 y=10', '0', { fill: COLOR_DEEP_ORANGE, fontSize: 16 }),
    OText('#nameLabel x=50 y=30 anchor=0.5', '0', { fill: COLOR_DEEP_ORANGE, fontSize: 12 }),
    OText('#descLabel x=40 y=60 anchor=0.5', '0', {align:"center", fill: COLOR_DEEP_ORANGE, fontSize: 10,wordWrap: true,wordWrapWidth:70 ,breakWords:true}),
    OSprite(`#btnClose @pointertap=hideThis x=40 y=0 width=15 height=15` , 'hud_x.png')
    // layout(
      
    // ).center().target
   
  ])
}

export class XDetailItem extends Sprite {
  nameLabel: Text =null
  strLabel:Text =null
  descLabel:Text =null
  btnClose:Sprite=null
  private _id: number

  constructor() {
    super(Texture.from('back_item.png'))
  }


  hideThis(){
    this.visible = false;
  }

  updateId(id: number, enable: boolean,isDetail:boolean = false) {
    this._id = id
    let cardInfo= getCardById(id)
    this.btnClose.visible=  isDetail;
    //console.log(cardInfo)
    if(cardInfo){
      this.nameLabel.text = cardInfo.name.toString()
      this.strLabel.text = cardInfo.strenth.toString()
      this.descLabel.text = cardInfo.skill.toString()
      this.interactive = enable
      this.alpha = enable ? 1 : 0.8
    }else{
      this.nameLabel.text = ''
      this.strLabel.text= ''
    }
  }

  get id(): number {
    return this._id
  }
}